s<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>请输入文本:</label><input id="ss" type="text"/>
<button onclick="generateTypeEffect()">生成打字效果</button>
<h2 id="showText"></h2>
<script>
    let i=0;
    let timer=0;
function generateTypeEffect () {
   //这里实现打字机效果
   //将内容显示在h2中
   var x=document.querySelector('#ss').value
      
      //    for(let i=0;i<x.length;i++){
      //          setTimeout(function(){
      //          document.querySelector('#showText').innerHTML=x.substr(0,i++);
      //       }, 150);
      //  }
    if (i <= x.length) {
    document.querySelector('#showText').innerHTML = x.slice(0, i++) + '_'
      timer = setTimeout(generateTypeEffect, 200)
    }
    else {
      document.querySelector('#showText').innerHTML = x//结束打字,移除 _ 光标
      clearTimeout(timer)
    }
}

</script>

</body>
</html>